<!--
 @description  核心指标统计
 @fileName CoreData.vue
 @author zengqiongying
 @created 2021/05/21 16:11:24
-->
<template>
  <div>
    <div class="core-box">
      <template v-for="(item,index) in coreData">
        <div :key="index" class="core-item" @click="handleCoreDetail(item.type)">
          <div class="c-title" @click.stop="openInstrusction('home',item.type)">
            <img class="icon" :src="item.icon">
            {{ item.title }}
            <img class="icon_inst" src="@/assets/image/icon_instructions.png">
          </div>
          <div class="today">今日<span :class="item.color">{{ item.today | filterForamtThousand }}</span></div>
          <div class="month">
            <div>昨日<span :class="item.color">{{ item.yesterday | filterForamtThousand }}</span></div>
            <div>本月<span :class="item.color">{{ item.month | filterForamtThousand }}</span></div>
          </div>
        </div>
      </template>
    </div>
    <div class="core-table">
      <div class="c-title" style="justify-content: left;" @click.stop="openInstrusction('home','production')">
        <img class="icon" src="@/assets/image/img_production@2x.png">
        生产报工
        <img class="icon_inst" src="@/assets/image/icon_instructions.png">
      </div>
      <div class="table-head">
        <div class="td">工厂类型</div>
        <div class="td">昨日</div>
        <div class="td">今日</div>
        <div class="td">本月</div>
      </div>
      <div class="table-body">
        <div v-for="(item,index) in tableData" :key="index" class="tr">
          <div class="td">{{ item.factoryTypeName }}</div>
          <div class="td">{{ item.yesterdayCompletedQuantity | filterForamtThousand }}</div>
          <div class="td color-red">{{ item.todayCompletedQuantity | filterForamtThousand }}</div>
          <div class="td">{{ item.monthCompletedQuantity | filterForamtThousand }}</div>
        </div>
        <div v-if="tableData.length===0" class="no-data">暂无数据</div>
      </div>
    </div>
    <div class="core-update-time">
      统计截止时间: {{ showDate }}
    </div>
    <van-popup v-model="showCoreDetail" round closeable class="custom-van-pop">
      <core-detail v-if="showCoreDetail" :detail-data="selectData" :select-date="coreDate" />
    </van-popup>
    <van-popup v-model="showCorePracticalDetail" round closeable class="custom-van-pop" style="width:90%">
      <core-practical-ship-detail v-if="showCorePracticalDetail" :select-date="coreDate" />
    </van-popup>
  </div>
</template>

<script>
import imgSale from '@/assets/image/img_sales@2x.png'
import imgOrder from '@/assets/image/img_order@2x.png'
import imgLogistics from '@/assets/image/img_logistics@2x.png'
import imgShippractical from '@/assets/image/img_shippractical@2x.png'
import CoreDetail from './CoreDetail'
import CorePracticalShipDetail from '@/components/logistics/CorePracticalShipDetail'
import { getSaleCoreQuantity } from '@/apis/sale'
import { getProducesCoreQuantity } from '@/apis/produces'
import { getLogisticsCoreCareQuantity, getLogisticsCoreShipQuantity, getLogisticsCorePracticalShipQuantity } from '@/apis/logistics'
import { parseTime } from '@/utils'
import showDateMixin from '@/mixins/showCoreTime'
export default {
  name: 'CoreData',
  components: { CoreDetail, CorePracticalShipDetail },
  mixins: [showDateMixin],
  props: {
    coreDate: {
      type: String,
      default: parseTime(new Date(), '{y}-{m}-{d}')
    }
  },
  data() {
    return {
      coreColor: ['color-red', 'color-blue', 'color-green', 'color-yellow'],
      coreData: [
        { title: '销售开单(车)', type: 'order', today: '-', yesterday: '-', month: '-', color: 'color-red', icon: imgSale },
        { title: '订单配车(车)', type: 'care', today: '-', yesterday: '-', month: '-', color: 'color-blue', icon: imgOrder },
        { title: '启运合同(车)', type: 'ship', today: '-', yesterday: '-', month: '-', color: 'color-yellow', icon: imgLogistics },
        { title: '启运实际(车)', type: 'practical', today: '-', yesterday: '-', month: '-', color: 'color-green', icon: imgShippractical }
      ],
      selectData: '',
      tableData: [],
      showCoreDetail: false, // 查看指标详情
      showCorePracticalDetail: false // 查看实际启运详情
    }
  },
  watch: {
    coreDate(val, oldVal) {
      this.getCoreData()
    }
  },
  created() {
    this.getCoreData()
  },
  methods: {
    getCoreData() {
      const date = this.coreDate
      // 获取销售开单核心指标
      getSaleCoreQuantity(date).then(res => {
        if (res.data) {
          this.$set(this.coreData[0], 'today', res.data.todayBillingQuantity || '-')
          this.$set(this.coreData[0], 'yesterday', res.data.yesterdayBillingQuantity || '-')
          this.$set(this.coreData[0], 'month', res.data.monthBillingQuantity || '-')
        }
      })

      // 核心指标-订单配车
      getLogisticsCoreCareQuantity(date).then(res => {
        if (res.data) {
          this.$set(this.coreData[1], 'today', res.data.todayCareQuantity || '-')
          this.$set(this.coreData[1], 'yesterday', res.data.yesterdayCareQuantity || '-')
          this.$set(this.coreData[1], 'month', res.data.monthCareQuantity || '-')
        }
      })

      // 核心指标-启运合同(车)
      getLogisticsCoreShipQuantity(date).then(res => {
        if (res.data) {
          this.$set(this.coreData[2], 'today', res.data.todayShipQuantity || '-')
          this.$set(this.coreData[2], 'yesterday', res.data.yesterdayShipQuantity || '-')
          this.$set(this.coreData[2], 'month', res.data.monthShipQuantity || '-')
        }
      })
      // 核心指标-物流实际启运
      getLogisticsCorePracticalShipQuantity(date).then(res => {
        if (res.data) {
          this.$set(this.coreData[3], 'today', res.data.todayPracticalShipQuantity || '-')
          this.$set(this.coreData[3], 'yesterday', res.data.yesterdayPracticalShipQuantity || '-')
          this.$set(this.coreData[3], 'month', res.data.monthPracticalShipQuantity || '-')
        }
      })
      // 获取生产报工各类型销量
      getProducesCoreQuantity(this.coreDate).then(res => {
        this.tableData = res.data || []
      })
    },
    handleCoreDetail(type) {
      if (type === 'practical') {
        this.showCorePracticalDetail = true
        return
      }
      this.selectData = this.coreData.find(v => v.type === type)
      this.showCoreDetail = true
    }

  }
}

</script>
<style lang='less' scoped>
  .core-box{
    position: relative;
    display:flex;
    flex-wrap: wrap;
    &::before{
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      background: #F5F6F7;
    }
    .core-item{
      position:relative;
      width: 50%;
      height: 108px;
      padding:15px 10px;
      border-bottom:1px solid #F5F6F7;
      box-sizing: border-box;
      letter-spacing: 1px;
      color: #888;
      font-size: 12px;
      &::after{
        content: '';
        position: absolute;
        right: 0;
        top: 15px;
        bottom: 15px;
        width: 1px;
        background:#F5F6F7 ;
      }
      &:nth-child(2n){
        &::after{
          display: none;
        }
      }
      .today{
        display: flex;
        align-items:center;
        justify-content: center;
        height: 24px;
        line-height: 24px;
        margin-bottom: 10px;
        span{
          margin-left: 2px;
          font-size: 20px;
          font-family: 'PFZH';
        }
      }
      .month{
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 16px;
        font-size:10px;
        white-space: nowrap;
        letter-spacing: 0;
        div:last-child{
          margin-left:5px;
        }
        span{
          margin-left: 1px;
        }
      }
    }
  }

  .c-title{
    height: 20px;
    display: flex;
    justify-content: center;
    align-items:center;
    margin-bottom: 10px;
    color: #999;
    font-size: 12px;
    font-family: 'PFZH';
    white-space: nowrap;
    .icon{
      margin-right: 5px;
      width: 18px;
      height: auto;
    }
  }
  .core-update-time{
    line-height: 18px;
    text-align: center;
    color: #999999;
    letter-spacing: 1px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .core-table{
    color: #333333;
    text-align: center;
    letter-spacing: 1px;
    line-height: 20px;
    margin-bottom: 10px;
    margin-top:10px;
    .table-head{
      display: flex;
      align-items: center;
      height: 36px;
      background: #F5F6F7;
      border-radius: 6px;
      font-size: 12px;
      font-family: 'PFZH';
    }
    .table-body{
      min-height: 36px;
      font-size: 12px;
    }
    .tr{
      display: flex;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid #F5F6F7;
    }
    .td{
      width: 25%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0 5px;
      overflow: hidden;
    }
  }
</style>
